console.log('ajax')
// 1、创建对象
let xhr = null
if (XMLHttpRequest) {
  xhr = new XMLHttpRequest()
} else {
  xhr = new ActiveXObject('Microsoft.XMLHTTP')
}
// 2、监听ajax的状态变化
xhr.onreadystatechange = function () {
  // 5、解析请求到的数据
  if (xhr.readyState === 4 && xhr.status === 200) {
    // console.log(xhr.response)
    let list = JSON.parse(xhr.response)
    console.log(list)
    render(list)
  }
}
// 3、打开链接
let url = 'https://web17.oss-cn-hangzhou.aliyuncs.com/list.json'
xhr.open('GET', url, true)
// 4、发送请求
xhr.send()

// 渲染数据函数
function render(arr) {
  if (!arr) {
    return
  }
  if (!arr.length) {
    return
  }
  let table = `<table>
    <tr>
      <th>index</th>
      <th>img</th>
      <th>name</th>
      <th>price</th>
      <th>opt</th>
    </tr>`
  for (let i = 0; i < arr.length; i++) {
    table += `<tr>
      <td>${i + 1}</td>
      <td><img src="${arr[i].imgUrl}"/></td>
      <td>${arr[i].name}</td>
      <td>${arr[i].price}</td>
      <td></td>
    </tr>`
  }
  table += `</table>`
  let goodsList = document.getElementsByClassName('goods-list')[0]
  goodsList.innerHTML = table
}
